<template>
  <div class="apply-form-container">
    <h2 class="text-2xl font-bold mb-4">非遗项目申报</h2>
    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
      <el-form-item label="项目名称" prop="name">
        <el-input v-model="form.name" placeholder="请输入项目名称" />
      </el-form-item>
      <el-form-item label="所属类别" prop="category">
        <el-select v-model="form.category" placeholder="请选择类别">
          <el-option label="剪纸" value="剪纸" />
          <el-option label="陶瓷" value="陶瓷" />
          <el-option label="刺绣" value="刺绣" />
          <el-option label="木雕" value="木雕" />
        </el-select>
      </el-form-item>
      <el-form-item label="传承地区" prop="region">
        <el-cascader
          v-model="form.region"
          :options="regionOptions"
          placeholder="请选择地区"
        />
      </el-form-item>
      <el-form-item label="历史背景" prop="history">
        <el-input
          type="textarea"
          v-model="form.history"
          :rows="5"
          placeholder="请输入历史背景（300字以内）"
          maxlength="300"
          show-word-limit
        />
      </el-form-item>
      <el-form-item label="图片上传" prop="images">
        <el-upload
          action="#"
          list-type="picture-card"
          :limit="3"
          :on-exceed="handleExceed"
          :before-upload="beforeUpload"
          :file-list="form.images"
          :auto-upload="false"
        >
          <el-icon><Plus /></el-icon>
          <template #file="{file}">
            <img :src="file.url" class="uploaded-img" />
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit">提交申请</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';

const formRef = ref();
const form = ref({
  name: '',
  category: '',
  region: [],
  history: '',
  images: []
});

const rules = {
  name: [
    { required: true, message: '请输入项目名称', trigger: 'blur' },
    { min: 2, max: 30, message: '2-30字', trigger: 'blur' }
  ],
  category: [{ required: true, message: '请选择类别', trigger: 'change' }],
  region: [{ required: true, message: '请选择地区', trigger: 'change' }],
  history: [
    { required: true, message: '请输入历史背景', trigger: 'blur' },
    { max: 300, message: '不超过300字', trigger: 'blur' }
  ],
  images: [
    { type: 'array', required: true, message: '请上传图片', trigger: 'change' }
  ]
};

const regionOptions = [
  { value: '北京', label: '北京' },
  { value: '上海', label: '上海' },
  { value: '广东', label: '广东' },
  { value: '江苏', label: '江苏' },
  // ...可扩展更多省份
];

const handleExceed = () => {
  ElMessage.warning('最多上传3张图片');
};

const beforeUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    ElMessage.error('仅支持JPG/PNG格式图片');
    return false;
  }
  return true;
};

const submit = async () => {
  try {
    await formRef.value.validate();
    // 模拟API提交
    ElMessage.success('申报成功！');
    // 清空表单
    form.value = { name: '', category: '', region: [], history: '', images: [] };
  } catch (err) {
    // 校验失败
  }
};
</script>

<style scoped>
.apply-form-container {
  @apply p-4;
  background-color: #f8f9fa;
  max-width: 600px;
  margin: 0 auto;
}
.uploaded-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
}
</style>